<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="mini"
        label-width="130px"
      >
        <!-- <el-col :span="12">
          <el-form-item label="拜访计划状态" prop="state">
            <el-select
              v-model="formData.state"
              placeholder="请选择拜访计划状态"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in stateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="所属区县" prop="area">
            <el-input
              v-model="formData.area"
              placeholder="请输入所属区县"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="审批状态" prop="approveState">
            <el-select
              v-model="formData.approveState"
              placeholder="请选择审批状态"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in approveStateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <!-- <el-form-item label="审批人" prop="approveUser">
            <el-select
              v-model="formData.approveUser"
              placeholder="请选择审批人"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in approveUserOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item> -->
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称" prop="custormer">
            <el-input
              v-model="formData.custormer"
              placeholder="请输入客户名称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户来源" prop="custormerSource">
            <el-select
              v-model="formData.custormerSource"
              placeholder="请选择客户来源"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in custormerSourceOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建类型" prop="createUserType">
            <el-select
              v-model="formData.createUserType"
              placeholder="请选择创建类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in createUserTypeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有无拜访计划" prop="visitRecord">
            <el-select
              v-model="formData.visitRecord"
              placeholder="请选择有无拜访计划"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in visitRecordOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行业" prop="trade">
            <el-input
              v-model="formData.trade"
              placeholder="请输入行业"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="转发次数" prop="forwardNum">
            <el-input-number
              v-model="formData.forwardNum"
              placeholder="转发次数"
            ></el-input-number>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
              v-model="formData.startTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择开始时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              v-model="formData.endTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择结束时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="!isKehu">
          <el-form-item label="客户经理" prop="accountManager">
            <el-select
              v-model="formData.accountManager"
              placeholder="请选择客户经理"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in accountManagerOptions"
                :key="index"
                :label="item.userName"
                :value="item.userId"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="isKehu">
          <el-form-item label="营服主任" prop="areaDirector">
            <el-select
              v-model="formData.areaDirector"
              placeholder="请选择客户经理"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in areaDirectorOptions"
                :key="index"
                :label="item.userName"
                :value="item.userId"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="isKehu">
          <el-form-item label="行业BU总监" prop="tradeBu">
            <el-select
              v-model="formData.tradeBu"
              placeholder="请选择行业BU总监"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in tradeBuOptions"
                :key="index"
                :label="item.userName"
                :value="item.userId"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="拜访天数" prop="visitDay">
            <el-input-number
              v-model="formData.visitDay"
              placeholder="拜访天数"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="拜访次数" prop="visitNum">
            <el-input-number
              v-model="formData.visitNum"
              placeholder="拜访次数"
            ></el-input-number>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="拜访内容" prop="visitInfo">
            <el-input
              v-model="formData.visitInfo"
              type="textarea"
              placeholder="请输入拜访内容"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="mini">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { listUserRoleId } from "@/api/system/user";
import { addVisitPlan } from "@/api/visit/visit";
import { checkRole } from "@/utils/permission";

export default {
  components: {},
  props: [],
  data() {
    const accountManagerCheck = (rule, value, callback) => {
      if (this.isKehu) {
        callback();
      } else {
        if (!value) {
          callback(new Error("请选择客户经理"));
        } else {
          callback();
        }
      }
    };

    const tradeBuCheck = (rule, value, callback) => {
      if (!this.isKehu) {
        callback();
      } else {
        if (!value) {
          callback(new Error("请选择行业BU总监"));
        } else {
          callback();
        }
      }
    };
    const areaDirectorCheck = (rule, value, callback) => {
      if (!this.isKehu) {
        callback();
      } else {
        if (!value) {
          callback(new Error("请选择营服主任"));
        } else {
          callback();
        }
      }
    };
    return {
      formData: {
        // state: undefined,
        area: undefined,
        // approveState: undefined,
        approveUser: undefined,
        custormer: undefined,
        custormerSource: undefined,
        createUserType: undefined,
        // forwardNum: undefined,
        startTime: null,
        endTime: null,
        accountManager: undefined,
        tradeBu: undefined,
        visitDay: undefined,
        visitNum: undefined,
        visitRecord: undefined,
        trade: undefined,
        visitInfo: undefined,
      },
      rules: {
        // state: [
        //   {
        //     required: true,
        //     message: "请选择拜访计划状态",
        //     trigger: "change",
        //   },
        // ],
        area: [
          {
            required: true,
            message: "请输入所属区县",
            trigger: "blur",
          },
        ],
        // approveState: [
        //   {
        //     required: true,
        //     message: "请选择审批状态",
        //     trigger: "change",
        //   },
        // ],
        areaDirector: [
          {
            required: true,
            validator: areaDirectorCheck,
            message: "请选择营服主任",
            trigger: "change",
          },
        ],
        custormer: [
          {
            required: true,
            message: "请输入客户名称",
            trigger: "blur",
          },
        ],
        custormerSource: [
          {
            required: true,
            message: "请选择客户来源",
            trigger: "change",
          },
        ],
        createUserType: [
          {
            required: true,
            message: "请选择创建类型",
            trigger: "change",
          },
        ],
        // forwardNum: [
        //   {
        //     required: true,
        //     message: "转发次数",
        //     trigger: "blur",
        //   },
        // ],
        startTime: [
          {
            required: true,
            message: "请选择开始时间",
            trigger: "change",
          },
        ],
        endTime: [
          {
            required: true,
            message: "请选择结束时间",
            trigger: "change",
          },
        ],
        accountManager: [
          {
            required: true,
            validator: accountManagerCheck,
            message: "请选择客户经理",
            trigger: "change",
          },
        ],
        tradeBu: [
          {
            required: true,
            validator: tradeBuCheck,
            message: "请选择行业BU总监",
            trigger: "change",
          },
        ],
        visitDay: [
          {
            required: true,
            message: "拜访天数",
            trigger: "blur",
          },
        ],
        visitNum: [
          {
            required: true,
            message: "拜访次数",
            trigger: "blur",
          },
        ],
        visitRecord: [
          {
            required: true,
            message: "请选择有无拜访计划",
            trigger: "change",
          },
        ],
        trade: [
          {
            required: true,
            message: "请输入行业",
            trigger: "blur",
          },
        ],
        visitInfo: [
          {
            required: true,
            message: "请输入拜访内容",
            trigger: "blur",
          },
        ],
      },
      stateOptions: [
        {
          label: "新建",
          value: 1,
        },
        {
          label: "计划执行",
          value: 2,
        },
        {
          label: "结束",
          value: 3,
        },
      ],
      approveStateOptions: [
        {
          label: "未审批",
          value: 0,
        },
        {
          label: "审批通过",
          value: 1,
        },
        {
          label: "审批不通过",
          value: 2,
        },
      ],
      areaDirectorOptions: [],
      custormerSourceOptions: [
        {
          label: "清单客户",
          value: 1,
        },
        {
          label: "非清单制客户",
          value: 2,
        },
      ],
      createUserTypeOptions: [
        {
          label: "行业BU总监",
          value: 1,
        },
        {
          label: "政企营服主任",
          value: 2,
        },
        {
          label: "客户经理",
          value: 3,
        },
      ],
      accountManagerOptions: [],
      tradeBuOptions: [],
      visitRecordOptions: [
        {
          label: "无",
          value: 0,
        },
        {
          label: "有",
          value: 1,
        },
      ],
      isKehu: true,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.loadUser();
  },
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        console.log(valid, "=======");
        if (!valid) return;
        // TODO 提交表单

        addVisitPlan(this.formData).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.$router.replace("/visit/visit/list");
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    loadUser() {
      // roleId: 101 客户经理Id
      listUserRoleId({ pageNum: 1, pageSize: 9999, roleId: 101 }).then(
        (res) => {
          this.accountManagerOptions = res.rows;
        }
      );

      // 行业bu
      listUserRoleId({ pageNum: 1, pageSize: 9999, roleId: 100 }).then(
        (res) => {
          this.tradeBuOptions = res.rows;
        }
      );

      // 营服主任
      listUserRoleId({ pageNum: 1, pageSize: 9999, roleId: 102 }).then(
        (res) => {
          this.areaDirectorOptions = res.rows;
        }
      );

      if (checkRole(["kehu"])) {
        this.isKehu = true;
      } else if (checkRole(["zhuren"]) || checkRole(["bu"])) {
        this.isKehu = false;
      }
    },
  },
};
</script>
<style></style>
